﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>后台登录 - 爱宠汇</title>
    <link rel="stylesheet" href="~/css/main.css?x=1432" />
    <link rel="stylesheet" href="~/css/element-ui_2.15.7_theme-chalk_index.css">
    <style scoped>
        .login {
            margin:auto;
            width: 380px;
            height: 400px;
            background-size: cover;
            overflow: hidden;
            border-color:silver;
            border-width: 1px;
            border-style: solid;
            border-radius: 16px;
        }

        .login-wrap {
            /*        background: url("../assets/images/login_bg.png") no-repeat;*/
            background-size: cover;
            margin: auto;
            overflow: hidden;
            line-height: 30px;
        }

        #password {
            margin-bottom: 20px;
        }

        hr {
            background-color: black;
            margin: 20px auto;
        }

        .el-button {
            width: 150px;
        }
    </style>
</head>
<body>
    @Html.AntiForgeryToken()
    <div id="app">
        <el-container>
            <div style="width:100%;height:45px;background-color:black;z-index:9;position:fixed;">
                <div style="text-align:center; line-height:45px; width:1020px; margin:auto;font-size:16px;height:45px;justify-content:center;display:flex">
                        <div style="float: left;"><img src="~/pet.png" style="width:70px; height:45px;" /></div>
                        <div style="float: left; margin-left:20px;color:white;font-size:22px;">后台登录</div>
                </div>
            </div>
            <div class="login" clearfix>
                <div class="login-wrap">
                    <el-row type="flex" justify="center">
                        <el-form ref="ruleForm" :model="formInfo" :rules="rules" status-icon label-width="70px">
                            <div style="display: flex; justify-content: center;">
                                    <span style="color: #0babeab8;font-size: 24px;margin-top:20px;">登录</span>
                            </div>
                            <hr>
                            <el-form-item prop="account" label="用户名">
                                <el-input v-model.trim="formInfo.account" placeholder="请输入用户名" prefix-icon></el-input>
                            </el-form-item>
                            <el-form-item id="password" prop="password" label="密码">
                                <el-input v-model.trim="formInfo.password" show-password placeholder="请输入密码"></el-input>
                            </el-form-item>
                            <div style="margin-left:70px;border-color:silver;border-width: 1px;border-style: solid;display:flex;width:76px;height:38px;margin-bottom:10px;">
                                <img style="margin:auto;" src="/Admin/AdminHome/GetVerifyCode" onclick="this.src=this.src+'?'" />
                            </div>
                            <el-form-item id="veriCode" prop="veriCode" label="验证码">
                                <el-input v-model.trim="formInfo.veriCode"  placeholder="请输入验证码"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button @@click="submitForm('ruleForm')">登 录</el-button>
                            </el-form-item>
                        </el-form>
                    </el-row>
                </div>
            </div>
        </el-container>
    </div>
    <script src="~/js/jquery3.6.0.js"></script>
    <script src="~/js/vue2.6.14.js"></script>
    <script src="~/js/eu-index2.15.7.js"></script>
    <script src="~/js/axios1.5.0.min.js"></script>
    <script src="~/js/jscookie3.0.1.min.js"></script>
    <script type="text/javascript">
        var app = new Vue({
            el: "#app",
            mounted: function () {
                $("#app").show();//vue渲染完后显示界面
            },
            methods: {
                 submitForm(formName) {
                    this.$refs[formName].validate(async (valid) => {
                        if (valid) {

                        axios.defaults.headers.common['RequestVerificationToken'] = $("[name='__RequestVerificationToken']").val();
                         await   axios.post('../../Admin/AdminHome/Login', {
                                "UserName": app.formInfo.account,
                                "UserPwd": app.formInfo.password,
                                "VerificationCode": app.formInfo.veriCode
                            }).then(response => {
                                if (response.data === 'ok') {
                                    location.href = '@ViewData["returnUrl"]';
                                }
                                else {
                                    this.$message.error(response.data);
                                }
                            }, error => {
                                alert("错误提示：" + error.message);
                            });


                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                },
            },
            data() {
                return {
                    formInfo: {
                        account: '',
                        password: '',
                        veriCode:'',
                    },
                    rules: {
                        account: [
                            { required: true, message: '请输入用户名', trigger: 'blur' }
                        ],
                        password: [
                            { required: true, message: '请输入密码', trigger: 'blur' }
                        ],
                        veriCode: [
                            { required: true, message: '请输入验证码', trigger: 'blur' },
                            { min: 4, max: 4, message: '请输入4位验证码', trigger: 'blur' }
                        ]
                    }
                }
            }
        });
    </script>
</body>
</html>
